<template>
  <el-form-item label="所属校区" v-if="schoolCampus.length>1" prop="schoolCampusId">
    <el-select
      v-model="schoolCampusId"
      placeholder="请选择所属校区"
      :disabled="disabled"
      :selectValue="selectValue"
      @change="handleChange"
      :multiple="multiple"
      clearable
    >
      <el-option v-for="school in schoolCampus" :key="school.campusId" :label="school.campusName" :value="school.campusId"></el-option>
    </el-select>
  </el-form-item>
</template>

<script setup>

import { getCampusList } from "@/api/school/campus";


const schoolCampusId = ref("");
const emit = defineEmits(['schoolCampus', 'schoolCampuslength'])
const schoolCampus = ref([]);
const selectValue = ref([]);

const props = defineProps({
  selectValue: {
    type:  [String, Object, Array,Number],
    default: null,
  },
  multiple: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }


});


watch(() => props.selectValue, val => {

  let v = props.selectValue == "" ? null : props.selectValue;
  schoolCampusId.value = v;
}, { deep: true, immediate: true });








function getCampus() {

  getCampusList().then(response => {
   if( response.data.length>1){
    schoolCampus.value = response.data;
    console.log( response.data)
  }else{
    // schoolCampus.value.push(response.items[0].id)
     emit("schoolCampus",response.data[0].campusId);
  //    emit("schoolCampus", schoolCampus.value);
     emit("schoolCampuslength", response.data.length);
   }
  });
}

function handleChange(data) {
  emit("schoolCampus", data == "" ? null : data);

}


getCampus();
</script>
